<%--
  Created by IntelliJ IDEA.
  User: 许正雄
  Date: 2021/12/13
  Time: 10:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link type="text/css" rel="stylesheet" href="/static/css/style.css" />
    <script src="/static/jquery3.6.0.js"></script>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="/static/jquery3.6.0.js"></script>
    <script>
        $(function () {
            $("#exit").click(function () {
                let msg="是否确认退出登录？？";
                if (confirm(msg)==true){
                    return true;
                }else {
                    return false;
                }
            })
        })
    </script>
</head>
<body>
<div id="header" class="wrap">
    <div id="logo"><img src="http://localhost/images/qdn_log.jpg" style="width: 120px;height: 60px" /></div>
    <div class="help">
        <span>
            <a href="selectByCustomerId?id=${customerSession.id}"> ${customerSession.customerName}<c:if test="${customerSession.customerSex==0}">先生</c:if><c:if test="${customerSession.customerSex==1}">女士</c:if></a>
        </span>
        <a href="index.jsp" id="exit">退出登录</a>
<%--        <a href="guestbook.html">留言</a>--%>
    </div>
    <div class="navbar">
        <ul class="clearfix">
            <li class="current"><a href="#">首页</a></li>
        </ul>
        <div id="childNav">
        </div>
    </div>
</div>

<div id="register" class="wrap">
    <div class="shadow">
        <em class="corner lb"></em>
        <em class="corner rt"></em>
        <div class="box">
            <h1 align="center">个人信息</h1>
                <input name="id" value="${customer.id}" type="hidden"/>
                <table align="center">
                    <tr>
                        <td class="field">用户名：</td>
                        <td><input class="text" type="text" name="customerName" readonly="readonly" value="${customer.customerName}" onfocus="FocusItem(this)" onblur="CheckItem(this);" /><span></span></td>
                    </tr>
                    <tr>
                        <td class="field">登录密码：</td>
                        <td><input class="text" type="password" id="customerPwd" readonly="readonly" name="password" value="${customer.customerPwd}" onfocus="FocusItem(this)" onblur="CheckItem(this);" /><span></span></td>
                    </tr>
                    <tr>
                        <td class="field">姓名：</td>
                        <td><input class="text" type="text" name="customerNickName" readonly="readonly" value="${customer.customerNickName}" onfocus="FocusItem(this)" onblur="CheckItem(this);" /><span></span></td>
                    </tr>
                    <tr>
                        <td class="field">性别：</td>
                        <td><input class="text" readonly="readonly" type="text" name="sex"
                             <c:if test="${customer.customerSex==0}">value="男" </c:if>
                             <c:if test="${customer.customerSex==1}">value="女" </c:if>
                             onfocus="FocusItem(this)" onblur="CheckItem(this);" /><span></span></td>
                    </tr>
                    <tr>
                        <td class="field">年龄：</td>
                        <td><input class="text" type="text" readonly="readonly" name="age" value="${customer.customerAge}" onfocus="FocusItem(this)" onblur="CheckItem(this);" /><span></span></td>
                    </tr>
                    <tr>
                        <td class="field">注册时间：</td>
                        <td><input class="text" readonly="readonly" type="text" name="creationDate" id="creatTime" value="${customer.registerTime}" onfocus="FocusItem(this)" onblur="CheckItem(this);" /><span></span></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><a href="javascript:showModal(${customer.id})" id="up" style="color: green">修改个人信息</a></td>
                    </tr>
                </table>
        </div>
    </div>
    <div class="clear"></div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"></button>
                <h4 class="modal-title" id="myModalLabel">修改个人信息</h4>
            </div>
            <div class="modal-body">
                <form id="frm">
                    <input type="hidden" name="id" value="${customer.id}"/>
                    <table align="center">
                        <tr>
                            <td class="field">用户名：</td>
                            <td><input class="text" type="text" name="customerName" value="${customer2.customerName}"/></td>
                        </tr>
                        <tr>
                            <td class="field">登录密码：</td>
                            <td><input class="text" type="password" id="pw" name="customerPwd" value="${customer2.customerPwd}" /><span></span></td>
                        </tr>
                        <tr>
                            <td class="field">姓名：</td>
                            <td><input class="text" type="text" name="customerNickName" value="${customer2.customerNickName}"/></td>
                        </tr>
                        <tr>
                            <td class="field">性别：</td>
                            <td><input class="text" type="radio" name="customerSex"
                                       <c:if test="${customer2.customerSex==0}">value="0" checked="checked"</c:if>
                                        /><span>男</span>
                                <input class="text" type="radio" name="sex"
                                   <c:if test="${customer2.customerSex==1}">value="1" checked="checked"</c:if>
                                    /><span>女</span></td>
                        </tr>
                        <tr>
                            <td class="field">年龄：</td>
                            <td><input class="text" type="text" name="customerAge" value="${customer.customerAge}"  /><span></span></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="tiJiao">提交更改</button>
            </div>
        </div>
    </div>
</div>

<div id="footer">
</div>
</body>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
    let cus
    function showModal(cid) {
        $.ajax({
            url:"selectByCustomerId2",
            type:"post",
            data:"id="+cid,
            dataType:"json",
            success:function (ret) {
                cus=ret;
                $("#myModal").modal("show");
            }
        })
    }
    $(function () {
        $("#tiJiao").click(function () {
            $.ajax({
                url: "updateCustomer",
                type: "post",
                data: $("#frm").serialize(),
                success:function () {
                    $("#frm").submit();
                    alert("修改成功，需要重新登录！！！");
                    $("#myModal").modal("hide");
                    window.location.href="login.jsp";
                }
            })
            // $("#frm").submit();
        })
    })
</script>
</html>

